<template>
  <div class="container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>试题录入</span>
      </div>
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="学科" prop="subject">
          <el-select
            v-model="ruleForm.subject"
            placeholder="请选择"
            style="width: 400px"
            @change="subjectsSelected"
          >
            <el-option
              :label="item.subjectName"
              :value="item.id"
              v-for="item in subjects"
              :key="item.id"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="目录" prop="directory">
          <el-select
            v-model="ruleForm.directory"
            placeholder="请选择"
            style="width: 400px"
          >
            <el-option
              :label="item.subjectName"
              :value="item.id"
              v-for="item in directorys"
              :key="item.id"
              ref="resetdirectory"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="企业" prop="company">
          <el-select
            v-model="ruleForm.company"
            placeholder="请选择"
            style="width: 400px"
          >
            <el-option
              :label="item.company"
              :value="item.id"
              v-for="item in companys"
              :key="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="城市" prop="province">
          <el-select
            v-model="ruleForm.province"
            placeholder="请选择"
            style="width: 198px"
            @change="provincecity"
          >
            <el-option
              :label="item"
              :value="item"
              v-for="item in provinces"
              :key="item"
            ></el-option>
          </el-select>
          &nbsp;
          <el-select
            v-model="ruleForm.city"
            placeholder="请选择"
            style="width: 198px"
          >
            <el-option
              :label="item"
              :value="item"
              v-for="item in citys"
              :key="item"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="方向" prop="direction">
          <el-select
            v-model="ruleForm.direction"
            placeholder="请选择"
            style="width: 400px"
          >
            <el-option
              :label="item"
              :value="item"
              v-for="item in directions"
              :key="item"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="题型" prop="questionType">
          <el-radio-group v-model="ruleForm.questionType">
            <el-radio
              v-for="item in questionTypes"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="难度" prop="difficulty">
          <el-radio-group v-model="ruleForm.difficulty">
            <el-radio
              v-for="item in difficultys"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="题干" prop="content1">
          <!-- 富文本编辑器 -->
          <quill-editor
            v-model="ruleForm.content1"
            ref="text"
            class="editor"
            :options="editorOption"
            @change="changeQuillEditor1"
          />
        </el-form-item>
        <!-- 单选 -->
        <el-form-item label="选项" v-if="ruleForm.questionType === '单选'">
          <el-radio-group v-model="ruleForm.resource" @change="getradioright">
            <el-radio :label="radioschoice[0]"></el-radio>
            <span>
              <el-input
                class="inputs"
                v-model="radios.radio0"
                placeholder="请输入内容"
              ></el-input>
            </span>
            <p class="upload">
              上传图片
              <i class="el-icon-circle-close close"></i>
            </p>
            <br />
            <el-radio :label="radioschoice[1]"></el-radio>
            <span>
              <el-input
                class="inputs"
                v-model="radios.radio1"
                placeholder="请输入内容"
              ></el-input>
            </span>
            <p class="upload">
              上传图片
              <i class="el-icon-circle-close close"></i>
            </p>
            <br />
            <el-radio :label="radioschoice[2]"></el-radio>
            <span>
              <el-input
                class="inputs"
                v-model="radios.radio2"
                placeholder="请输入内容"
              ></el-input>
            </span>
            <p class="upload">
              上传图片
              <i class="el-icon-circle-close close"></i>
            </p>
            <br />
            <el-radio :label="radioschoice[3]"></el-radio>
            <span>
              <el-input
                class="inputs"
                v-model="radios.radio3"
                placeholder="请输入内容"
              ></el-input>
            </span>
            <p class="upload">
              上传图片
              <i class="el-icon-circle-close close"></i>
            </p>
          </el-radio-group>
          <div class="rightradio" ref="radiorightS">【答案】:</div>
        </el-form-item>

        <!-- 多选 -->
        <el-form-item label="选项" v-else-if="ruleForm.questionType === '多选'">
          <el-checkbox-group v-model="ruleForm.type" @change="getCheckboxright">
            <el-checkbox :label="checkboxschoice[0]" name="type"> </el-checkbox>
            <span>
              <el-input
                class="cinputs"
                v-model="checkboxs.checkbox0"
                placeholder="请输入内容"
              ></el-input>
            </span>
            <p class="upload">
              上传图片
              <i class="el-icon-circle-close close"></i>
            </p>
            <br />
            <el-checkbox :label="checkboxschoice[1]" name="type"> </el-checkbox>
            <span>
              <el-input
                class="cinputs"
                v-model="checkboxs.checkbox1"
                placeholder="请输入内容"
              ></el-input>
            </span>
            <p class="upload">
              上传图片
              <i class="el-icon-circle-close close"></i>
            </p>
            <br />
            <el-checkbox :label="checkboxschoice[2]" name="type"> </el-checkbox>
            <span>
              <el-input
                class="cinputs"
                v-model="checkboxs.checkbox2"
                placeholder="请输入内容"
              ></el-input>
            </span>
            <p class="upload">
              上传图片
              <i class="el-icon-circle-close close"></i>
            </p>
            <br />
            <el-checkbox :label="checkboxschoice[3]" name="type"> </el-checkbox>
            <span>
              <el-input
                class="lastinputs"
                v-model="checkboxs.checkbox3"
                placeholder="请输入内容"
              ></el-input>
            </span>
            <p class="upload">
              上传图片
              <i class="el-icon-circle-close close"></i>
            </p>
            <br />
            <div class="rightcheckbox" ref="checkboxrightS">【答案】:</div>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="解析视频" style="width: 400px">
          <el-input v-model="ruleForm.videoURL"></el-input>
        </el-form-item>
        <el-form-item label="答案解析" prop="content2">
          <!-- 富文本编辑器 -->
          <quill-editor
            ref="text"
            v-model="ruleForm.content2"
            class="editor"
            :options="editorOption"
            @change="changeQuillEditor2"
          />
        </el-form-item>
        <el-form-item label="题目备注">
          <el-input
            v-model="ruleForm.remarks"
            type="textarea"
            style="width: 400px"
            :rows="4"
            maxlength="200"
            show-word-limit
          ></el-input>
        </el-form-item>
        <el-form-item label="试题标签" prop="tag">
          <el-select
            multiple
            v-model="ruleForm.tag"
            placeholder="请选择试题标签"
            style="width: 400px"
          >
            <el-option
              :label="item.tagName"
              :value="item.tagName"
              v-for="item in tags"
              :key="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')"
            >确认提交</el-button
          >
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { quillEditor } from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

import { list as subjectlist } from '@/api/hmmm/subjects.js'
import { list as directoryslist } from '@/api/hmmm/directorys.js'
import { list as companyslist } from '@/api/hmmm/companys.js'
import { provinces, citys } from '@/api/hmmm/citys.js'
import { direction, questionType, difficulty } from '@/api/hmmm/constants.js'
import { list as tagslist } from '@/api/hmmm/tags.js'
import { add, update } from '@/api/hmmm/questions.js'
export default {
  name: 'test',
  data () {
    return {
      editorOption: {
        placeholder: "请在这里输入",
        modules: {
          toolbar: [
            ['bold', 'italic', 'underline', 'strike'],    //加粗，斜体，下划线，删除线

            [{ 'list': 'ordered' }, { 'list': 'bullet' }],     //列表

            ['blockquote'],     //引用

            ['code-block', 'image', 'link']    //代码块，上传图片,引用
          ]
        }
      },
      ruleForm: {
        subject: '',
        directory: '',
        company: '',
        province: '',
        city: '',
        direction: '',
        questionType: '',
        difficulty: '',
        videoURL: '',
        //题目备注
        remarks: '',
        tag: '',
        rich: '',
        type: [],
        content1: '',
        content2: '',
        resource: '',
      },
      rules: {
        subject: [
          { required: true, message: '请选择哪一门的学科', trigger: 'blur' },
        ],
        directory: [
          { required: true, message: '请选择目录', trigger: 'blur' },
        ],
        company: [{
          required: true, message: '请选择企业', trigger: 'blur'
        }],
        province: [{
          required: true, message: '请选择城市', trigger: 'blur'
        }],
        direction: [{
          required: true, message: '请选择方向', trigger: 'blur'
        }],
        questionType: [{
          required: true, message: '请选择题型', trigger: 'blur'
        }],
        difficulty: [{
          required: true, message: '请选择难度', trigger: 'blur'
        }],
        content1: [
          { required: true, message: '请写出题干', trigger: 'blur' },
          { max: 200, message: '请输入200位以内的字符' }
        ],
        content2: [
          { required: true, message: '请写出答案解析', trigger: 'blur' },
          { max: 200, message: '请输入200位以内的字符' }
        ],
        tag: [{
          required: true, message: '请选择试题标签', trigger: 'blur'
        }],
      },
      imageUrl: '',
      //学科列表
      subjects: [],
      //目录列表
      directorys: [],
      //公司列表
      companys: [],
      //省市
      provinces: [],
      //地区
      citys: [],
      //方向
      directions: [],
      //题型
      questionTypes: [],
      //难度
      difficultys: [],
      //标签
      tags: [],
      //单选题目绑定4个选项
      radioschoice: ['A', 'B', 'C', 'D'],
      //单选题目选项的值
      radios: {
        radio0: '',
        radio1: '',
        radio2: '',
        radio3: '',
      },
      // 正确单选答案
      rightradio: '',
      //多选题目绑定4个选项
      checkboxschoice: ['A', 'B', 'C', 'D'],
      checkboxs: {
        checkbox0: '',
        checkbox1: '',
        checkbox2: '',
        checkbox3: '',
      },
      //正确多选答案
      rightcheckbox: [],
      questionTypess: '',
      difficultyss: '',
      options: [],
      radi: '',
      id: '',
    };
  },
  methods: {
    //富文本编辑器表单验证
    changeQuillEditor1 () {
      this.$refs['ruleForm'].validateField('content1');
    },
    changeQuillEditor2 () {
      this.$refs['ruleForm'].validateField('content2');
    },
    //获取学科所有列表
    async subject () {
      const { data } = await subjectlist({
        pagesize: 100
      });
      //因为请求到的数据是从100->1,所以我们采用数组方法reverse()逆序输出使得1->100
      this.subjects = data.items.reverse();
    },
    //当学科改变时，目录，标签也同时改变 
    async subjectsSelected (id, resetdirectory) {
      try {
        //获取学科的目录
        const data1 = await directoryslist({
          subjectID: id
        });
        this.directorys = data1.data.items.reverse()
        //获取学科的标签
        const data2 = await tagslist({
          subjectID: id
        });
        this.tags = data2.data.items.reverse();
      } catch (error) {
      }
    },
    //获取所有企业列表
    async company () {
      const { data } = await companyslist({
        pagesize: 100
      });
      this.companys = data.items.reverse();
    },
    //获取所有城市
    province () {
      const data = provinces();
      this.provinces = data
    },
    //获取所有城市下的地区
    provincecity (province) {
      this.citys = citys(province)

    },
    //获取所有对象
    direction () {
      this.directions = direction
    },
    //获取所有题型
    questionType () {
      this.questionTypes = questionType
    },
    //获取所有难度
    difficulty () {
      this.difficultys = difficulty
    },
    //默认单选按钮选中
    defaultradio () {
      this.ruleForm.questionType = '单选'
      this.ruleForm.difficulty = '简单'
    },
    //正确答案单选题打印
    getradioright () {
      switch (this.ruleForm.resource) {
        case 'A':
          this.rightradio = this.radios.radio1;
          break;
        case 'B':
          this.rightradio = this.radios.radio2;
          break;
        case 'C':
          this.rightradio = this.radios.radio3;
          break;
        case 'D':
          this.rightradio = this.radios.radio4;
          break;
      }
      //   this.$refs.radiorightS.innerHTML = "【答案】:" + this.ruleForm.resource + this.rightradio
      this.$refs.radiorightS.innerHTML = "【答案】:" + this.ruleForm.resource
    },
    //正确答案多选题打印
    getCheckboxright (val) {
      this.rightcheckbox = val
      this.$refs.checkboxrightS.innerHTML = "【答案】:" + this.rightcheckbox
    },
    // 新增题库中的题
    addmessage (msg) {
      // 提示框
      this.$confirm("确认要添加此试题吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "success",
        callback: (action) => {
          if (action === "confirm") {
            this.$router.push('list')
            this.$message({
              type: 'success',
              message: '增加成功!'
            });
          } else {
          }
        },
      });
    },
    //提交表单
    submitForm (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.formlist()
          this.addmessage()
        } else {
          this.$message({
            message: '有选项未填哦!'
          });
          return false;
        }
      });
    },
    //重置表单
    resetForm (formName) {
      this.$refs[formName].resetFields();
    },
    async formlist () {
      await add({
        subjectID: this.ruleForm.subject,
        catalogID: this.ruleForm.directory,
        enterpriseID: this.ruleForm.company,
        province: this.ruleForm.province,
        city: this.ruleForm.city,
        direction: this.ruleForm.direction,
        questionType: this.questionTypess,
        difficulty: this.difficultyss,
        question: this.ruleForm.content1,
        options: this.options,
        videoURL: this.ruleForm.videoURL,
        answer: this.ruleForm.content2,
        remarks: this.ruleForm.remarks,
        tags: this.ruleForm.tag.toString(),
      })
    },
    transform () {
      switch (this.ruleForm.questionType) {
        case '单选':
          this.questionTypess = '1'
          break;
        case '多选':
          this.questionTypess = '2'
          break;
        case '简答':
          this.questionTypess = '3'
          break;
      }
      switch (this.ruleForm.difficulty) {
        case '简单':
          this.difficultyss = '1'
          break;
        case '一般':
          this.difficultyss = '2'
          break;
        case '困难':
          this.difficultyss = '3'
          break;
      }
    },
    topic () {
      //单选
      if (this.questionTypess == '1') {
        for (let i = 0; i < this.radioschoice.length; i++) {
          //创建数组
          if (this.options.length < this.radioschoice.length) {
            this.options.push({
              code: '',
              title: '',
              img: '',
              isRight: false
            })
          }
          // 代码(A,B,C,D选项)
          this.options[i].code = this.radioschoice[i]
          //标题(A,B,C,D选项的值)
          this.radi = 'radio' + i
          this.options[i].title = this.radios[this.radi]
          //正确的选项
          if (this.ruleForm.resource == this.radioschoice[i]) {
            this.options[i].isRight = true
          } else {
            this.options[i].isRight = false
          }
        }
      }
      //多选
      else if (this.questionTypess == '2') {
        for (let i = 0; i < this.checkboxschoice.length; i++) {
          //创建数组
          if (this.options.length < this.checkboxschoice.length) {
            this.options.push({
              code: '',
              title: '',
              img: '',
              isRight: false
            })
          }
          // 代码(A,B,C,D选项)
          this.options[i].code = this.checkboxschoice[i]
          //标题(A,B,C,D选项的值)
          this.checkbo = 'checkbox' + i
          this.options[i].title = this.checkboxs[this.checkbo]
          if (this.ruleForm.type[i] == this.options[i].code) {
            this.options[i].isRight = true
          } else {
            this.options[i].isRight = false
          }
        }
      }
      //简答
      else {
        this.options = []
      }


    },
    // async updatelist () {
    //   const { data } = await update({
    //   })
    //   console.log(data);
    // }
  },
  components: {
    quillEditor
  },
  created () {
    this.subject()
    this.company()
    this.province()
    this.direction()
    this.questionType()
    this.difficulty()
    this.defaultradio()
    this.topic()
    // this.updatelist()
  },
  updated () {
    this.transform()
    this.topic()
  }
}
</script>

<style scoped >
.text {
  font-size: 14px;
}
.box-card {
  margin: 30px 36px 30px 36px;
  width: 1297px;
}
.editor {
  line-height: normal !important;
  height: 250px;
  margin-bottom: 40px;
}
/* 单选按钮的答案选项样式 */
.inputs {
  display: inline-block;
  width: 240px;
  margin-left: -25px;
}
/* 多选按钮的答案选项样式 */
.cinputs {
  display: inline-block;
  width: 240px;
  margin-left: -25px;
}
/* 多选按钮最后一个的答案选项样式 */
.lastinputs {
  display: inline-block;
  width: 240px;
  margin-left: 4px;
}
/* 上传图片样式 */
.upload {
  position: relative;
  font-size: 14px;
  color: #8c939d;
  width: 127px;
  height: 76px;
  line-height: 76px;
  text-align: center;
  border: 1px dotted #d9d9d9;
  display: inline-block;
}
/* 关闭按钮的样式 */
.close {
  position: absolute;
  right: 0;
  top: 0;
  font-size: 18px;
  transform: translate(50%, -50%);
}
.rightradio {
  letter-spacing: 10px;
  color: #31708f;
  background-color: #d9edf7;
  border-color: #bce8f1;
}
.rightcheckbox {
  letter-spacing: 10px;
  color: #31708f;
  background-color: #d9edf7;
  border-color: #bce8f1;
  font-size: 14px;
}
</style>
